<template>
  <div style="margin-top: 10px">
    <a-spin :spinning="loading">
      <a-select style="width: 400px" v-model="currentName">
        <a-select-option v-for="item in netInterfaces" :key="item.Name">
          {{ item.description }}
        </a-select-option>
      </a-select>
      <a-button @click="scanEdges">扫描</a-button>
      <a-tree :auto-expand-parent="autoExpandParent" :tree-data="edges">
      </a-tree>
    </a-spin>
  </div>
</template>
<script>
import { getInterfaces, scan } from "@/service/mscan";
const columns = [
  { title: "id", dataIndex: "ID", key: "id" },
  { title: "本地端口", dataIndex: "IP", key: "IP" },
  { title: "掩码", dataIndex: "NetMask", key: "NetMask" },
  { title: "mac", dataIndex: "Mac", key: "Mac" },
  {
    title: "操作",
    dataIndex: "",
    key: "x",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  data() {
    return {
      netInterfaces: [],
      currentName: "",
      edges: [],
      columns: columns,
      autoExpandParent: true,
      loading: false,
    };
  },
  methods: {
    refresh() {
      let self = this;
      getInterfaces().then((res) => {
        if (res && res.data && res.data.result) {
          let result = res.data.result;
          if (result) {
            console.log("##############", result);
            result.forEach((it) => {
              it.description =
                it.Name +
                " ip:" +
                it.IP +
                " 掩码:" +
                it.NetMask +
                " mac地址:" +
                it.Mac;
            });
            self.netInterfaces = result;
          }
        }
      });
    },
    scanEdges() {
      let self = this;
      let item = this.netInterfaces.find((it) => {
        return it.Name === self.currentName;
      });
      if (item) {
        let self = this;
        self.loading = true;
        scan(item.IP, item.Name)
          .then((res) => {
            console.log("^^^^^^^^^^", res);
            if (res && res.data && res.data.result) {
              let edges = new Map();
              res.data.result.forEach((re) => {
                re.key = re.ID;
                re.title = re.ID;
                re.children = re.IPs.map((ip) => {
                  return {
                    key: re.ID + ip.IP,
                    title: ip.Name + ":" + ip.IP + "@" + ip.Mac,
                  };
                });
                edges.set(re.ID, re);
              });
              //self.edges = edges.values()
              console.log("***********", edges.values());
              self.$set(self, "edges", Array.from(edges.values()));
            }
          })
          .finally(() => {
            self.loading = false;
          });
      }
    },
  },
  created() {
    this.refresh();
  },
};
</script>
<style scoped>
.demo-loadmore-list {
  min-height: 350px;
}
</style>

